<template>
  <div id="app">
    <div :class="{ box: count > 10000 ? flag : flag1 }">
      我的总资产{{ count }}元
    </div>
    我是不是个有钱人<input
      type="checkbox"
      :checked="count > 10000 ? true : false"
    />
    <div :class="{ box: count > 10000 ? flag : flag1 }">
      目前的状态:{{ count >= 10000 ? '有钱人' : '穷光蛋' }}
    </div>
    <button @click="fn1" :class="{ box: count > 10000 ? flag : flag1 }">
      洗脚60
    </button>
    <button @click="fn2" :class="{ box: count > 10000 ? flag : flag1 }">
      吃饭100
    </button>
    <button @click="fn3" :class="{ box: count > 10000 ? flag : flag1 }">
      约会1000
    </button>
    <button @click="fn4" :class="{ box: count > 10000 ? flag : flag1 }">
      送外卖+100
    </button>
    <div :class="{ box: count > 10000 ? flag : flag1 }">我是什么颜色呢</div>
  </div>
</template>

<script>
import zj from './components/zj.vue'
export default {
  components: { zj },
  data() {
    return {
      count: 10000,
      flag: true,
      flag1: false,
    }
  },
  methods: {
    fn1() {
      this.count -= 60
    },
    fn2() {
      this.count -= 100
    },
    fn3() {
      this.count -= 1000
    },
    fn4() {
      this.count += 100
    },
  },
}
</script>
<style>
.box {
  color: red;
}
</style>
